
<script setup>import { ref } from "vue";

const dormitoryList = ref([
  {
    id: 1,
    title: '阳光宿舍',
    size: 4,
    floor: 2,
    description: '朝南，采光良好'
  },
  {
    id: 2,
    title: '温馨宿舍',
    size: 6,
    floor: 3,
    description: '靠近图书馆，环境安静'
  },
  {
    id: 3,
    title: '花园宿舍',
    size: 4,
    floor: 1,
    description: '一楼，有独立花园'
  },
  {
    id: 4,
    title: '高层宿舍',
    size: 8,
    floor: 5,
    description: '视野开阔，可俯瞰校园'
  },
])

const infoShow = ref(false)
const infoForm = ref({})

const remove = (id) => {
  dormitoryList.value = dormitoryList.value.filter(item => item.id !== id)
}

const openInfo = () => {
  infoForm.value = {}
  infoShow.value = true
}

const editInfo = (row) => {
  infoForm.value = { ...row }
  infoShow.value = true
}

const save = () => {
  const info = { ...infoForm.value }

  // 验证输入
  if (!info.title?.trim()) {
    alert('请输入宿舍名称')
    return;
  }
  if (!info.size || info.size <= 0) {
    alert('请输入有效的宿舍容量')
    return;
  }
  if (!info.floor || info.floor <= 0) {
    alert('请输入有效的楼层')
    return;
  }
  if (!info.description?.trim()) {
    alert('请输入宿舍描述')
    return;
  }

  // 如果是新宿舍，添加ID
  if (!info.id) {
    info.id = new Date().getTime();
    dormitoryList.value.push(info)
  } else {
    // 如果是编辑宿舍，更新信息
    const index = dormitoryList.value.findIndex(item => item.id === info.id)
    if (index !== -1) {
      dormitoryList.value[index] = info
    }
  }

  infoShow.value = false;
}
</script>

<template>
  <div>
    <el-button type="primary" @click="openInfo">添加</el-button>
  </div>
  <el-table :data="dormitoryList" border stripe>
    <el-table-column prop="id" label="编号" width="80" />
    <el-table-column prop="title" label="宿舍名称" width="180" />
    <el-table-column prop="size" label="宿舍容量" width="80" />
    <el-table-column prop="floor" label="楼层" width="80" />
    <el-table-column prop="description" label="描述" />
    <el-table-column width="180" label="操作">
      <template #default="props">
        <el-button type="primary" size="small" @click="editInfo(props.row)">编辑</el-button>
        <el-button type="danger" size="small" @click="remove(props.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div>
    <el-dialog v-model="infoShow" title="宿舍详情" width="500">
      <el-form :model="infoForm">
        <el-form-item label="宿舍名称" :label-width="100">
          <el-input v-model="infoForm.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="宿舍容量" :label-width="100">
          <el-input v-model.number="infoForm.size" type="number" min="1" />
        </el-form-item>
        <el-form-item label="楼层" :label-width="100">
          <el-input v-model.number="infoForm.floor" type="number" min="1" />
        </el-form-item>
        <el-form-item label="描述" :label-width="100">
          <el-input v-model="infoForm.description" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="infoShow = false">取消</el-button>
          <el-button type="primary" @click="save">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped></style>